<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .carousel {
          width: 100px;
          height: 100px;
          position: relative;
          left: 400px;
          top: 100px;
          overflow: hidden;
        }
    
        .items {
          color: rgb(53, 31, 31);
          width: 420px;
          position: absolute;
          left: 0px;
          animation: carouselMove 3s infinite;
          animation-direction: normal;
          /*animation-timing-function:easy 规定动画运动的速度 animation-iteration-count:infinite 播放无数次*/
          -webkit-animation: carouselMove 8s infinite;
          -moz-animation-direction: normal;
    
        }
    
        .items:hover {
          /* 暂停动画 */
          animation-play-state:paused;
        }
    
        .item1,
        .item2,
        .item3 {
          width: 100px;
          height: 100px;
          float: inline-end; /* 修改轮播方向 */
        }
    
        .item1 {
          background-color: #12B7F5;
        }
    
        .item2 {
          background-color: #F9B041;
        }
    
        .item3 {
          background-color: #CCCCCC;
        }
    
        @keyframes carouselMove {
          0% {
            bottom: 0px; /* 修改轮播方向 */
          }
    
          35% {
            bottom: -100px; /* 修改轮播方向 */
          }
    
          70% {
            bottom: -200px; /* 修改轮播方向 */
          }
    
          100% {
            bottom: -300px; /* 修改轮播方向 */
          }
        }
      </style>
</head>

<body>
    <!-- <div id="box" style="width: 300px;height: 200px;border: 1px solid red;float: right;margin-right: 50px;">
        <ul style="list-style: none;margin: 0 0 0 0;">
            <li>
                <a href="">
                    <img src="img/us_03_r2fq.png" style="width: 300px;height: 144px;margin-top: 56px;" />
                </a>
            </li>
            <li>
                <a href="">
                    <img src="img/shu1_06_e0ir.png" style="width: 300px;height: 144px;margin-top: 56px;" />
                </a>
            </li>
            <li>
                <a href="">
                    <img src="img/shou2_06_359e.png" style="width: 300px;height: 144px;margin-top: 56px;" />
                </a>
            </li>
        </ul>
    </div> -->
    <div class="carousel">
        <div class="items">
            <div class="item1">轮播1</div>
            <div class="item2">轮播2</div>
            <div class="item3">轮播3</div>
        </div>
    </div>
</body>

</html>